<template>
  <nav>
      <span v-for="(item,index) in navlist" 
      :key="item.title"
      :class="{active:curIndex === index}"
      @click="$emit('change',index)"
      >{{item.title}}</span>
    </nav>
</template>

<script>
export default {
    props:['navlist','curIndex'],
}
</script>

<style lang=scss>
  nav{
    width: 300px;
    display: flex;
    height: 40px;
    line-height: 40px;
    border: 1px solid;
    span{
      flex: 1;
      text-align: center;
    }
    .active{
      background: orange;
    }
  }
</style>